

import { ReactNode, useEffect } from 'react';
import styles from './maskModel.module.less';
import { Image } from "@tarojs/components";
import { observer } from "mobx-react-lite";
import MyEmpty from 'src/components/MyEmpty/MyEmpty';
import MyPopup from 'src/components/MyPopup/MyPopup';
import MyScrollView from 'src/components/MyScrollView/MyScrollView';
import utils from 'src/utils/utils';
import { MaskData } from 'types/type';
import maskModelStore from './maskModelStore';
import { chunk } from 'lodash';
import { Row } from '@nutui/nutui-react-taro';
import designerRender from '../Designer/designerRender';

interface Iprops {
    children?: ReactNode
}

// 遮罩弹窗
const MaskModel = observer((props: Iprops) => {

    useEffect(() => {
        maskModelStore.getNextPage(true);
    }, []);

    return (
        <MyPopup
            hasMark={false}
            open={maskModelStore.show}
            className={styles.maskModel}
            title={"遮罩"}
            onClose={() => {
                maskModelStore.setShow(false);
            }}
        >
            {
                maskModelStore.list.length === 0 &&
                <MyEmpty
                    description="暂无遮罩"
                    style={{
                        height: "420rpx"
                    }}
                />
            }
            {/* 模版列表 */}
            {
                maskModelStore.list.length > 0 &&
                <MyScrollView
                    className={styles.maskList}
                    onScrollBottom={() => {
                        maskModelStore.getNextPage();
                    }}
                >
                    {
                        chunk(maskModelStore.list, 4).map((maskArr: Array<MaskData>, i) => {
                            return (
                                <Row key={i}>
                                    {
                                        maskArr.map((maskItem, ii) => {
                                            return (
                                                <Image
                                                    key={ii}
                                                    className={styles.maskItem}
                                                    src={maskItem.svgId === 0 ? maskItem.svgImageUrl : utils.ossSuffix(maskItem.svgImageUrl)}
                                                    onClick={() => {
                                                        if (maskItem.svgId === 0) {
                                                            designerRender.setImageMask();
                                                        } else {
                                                            designerRender.setImageMask(maskItem.svgImageUrl, maskItem.svgData);
                                                            maskModelStore.setShow(false);
                                                        }
                                                    }}
                                                />
                                            );
                                        })
                                    }
                                </Row>
                            )
                        })
                    }
                </MyScrollView>
            }
        </MyPopup>
    );
});

export default MaskModel;